<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>校园点餐后台管理系统</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>

    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <input type="hidden" name="id" th:value="${merchant?.id}">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    店铺名称
                </label>
                <div class="layui-input-inline" >
                    <input  type="text" id="name" name="name" required="" th:value="${merchant?.name}" lay-verify="required"
                            autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <input type="hidden" id="ps" th:value="${merchant?.password}">
                <label for="oldpassword" class="layui-form-label">
                    原密码
                </label>
                <div class="layui-input-inline" >
                    <input  type="text" id="oldpassword" name="oldpassword"  onmouseout="mmjy()"
                            autocomplete="off" class="layui-input">
                    <span id="span"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="newpassword" class="layui-form-label">
                   新密码
                </label>
                <div class="layui-input-inline" >
                    <input  type="text" id="newpassword" name="newpassword" th:disabled="true" th:required="false"
                            autocomplete="off" class="layui-input">
                    <span id="span1" style="color: red">输入正确密码后方可修改密码!</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    联系电话
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone" required="" th:value="${merchant?.phone}" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="image" class="layui-form-label">
                    店铺图片
                </label>
                <div class="layui-input-inline">
                    <input type="hidden" name="image" th:value="${merchant?.image}" id="images">
                    <button type="button" class="layui-btn" id="image">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <div  th:if="${merchant?.image}">
                    <img id="demo1" style="align-content: center;width: 200px;height: 150px;margin: 0 150px"  th:src="${merchant?.image}">
                </div>
                <img th:if="${merchant?.image} eq null" id="demo2" style="align-content: center;width: 200px;height: 150px;margin: 0 150px" src="/images/tp.jpg">
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label">
                </label>
                <button  class="layui-btn" style="width: 60%;align-items: center" lay-filter="update" lay-submit="">
                    <span >修改</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function mmjy() {
        var oldpassword = $("#oldpassword").val()
        var password = $("#ps").val()
        if (oldpassword == password && oldpassword != ''){
            $("#newpassword").attr("disabled",false)
            $("#newpassword").attr("lay-verify","password")
            $("#span1").text("")
        }
    }
    layui.use(['form', 'layer'],
    function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        form.verify({
           password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
        //监听提交
        form.on('submit(update)',
            function(data) {
                console.log(data)
                let merchant = data.field;
                var password;
                if (data.newpassword == ''){
                    password = merchant.oldpassword
                }
                $.ajax({
                    url: '/merchant/updateMerchant',
                    type: 'put',
                    dataType: 'json',
                    async: false,
                    data: {
                        id: merchant.id,
                        name: merchant.name,
                        image: merchant.image,
                        password: password,
                        phone: merchant.phone
                    },
                    success: function (res) {
                        //关闭当前frame
                        layer.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    },
                    error: function (res) {
                        console.log(res.msg)
                    }
                })
                return
            })

    });
</script>

</body>

</html>